<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>编辑页面</title>
    <link rel="stylesheet" href="./../../base/bass.css"/>
    <style>
        .table-edit-btn {}
        .table-edit-btn:hover {
            text-decoration: underline red;
        }
    </style>
</head>
<body>
</body>
<script>
    window.editForm = new (class {
        constructor() {
            this.iconDialog = null;
            this.dialog = null;
            this.id = `dialog_${new Date().getTime()}_${parseInt(Math.random() * 1000)}`;
            this.objId = null;
            this.title = null;
            this.path = null;
            this.image = null;
            this.imageValue = null;
            this.type = null;
            this.description = null;
            this.submit = null;
        }
        init(dialog,iconDialog) {
            this.dialog = dialog;
            this.iconDialog = iconDialog;
            let dom = dialog.dialogContent;
            dom.innerHTML = `<table style="width: calc(100% - 20px);margin: 10px;text-align: right;">
        <tbody>
        <tr>
            <td class="text">标题</td>
            <td><input class="${this.id}-title" style="width: 100%;outline: none;height: 20px;" type="text"></td>
        </tr>
        <tr>
            <td class="text">链接</td>
            <td><input class="${this.id}-path" style="width: 100%;outline: none;height: 20px;" type="text"></td>
        </tr>
        <tr>
            <td class="text">图标</td>
            <td><button class="${this.id}-image" style="width: 100%;outline: none;">选择</button></td>
        </tr>
        <tr>
            <td class="text">本站</td>
            <td><div style="float:left;"><input type="radio" class="${this.id}-type" name="type" value="true">站内 <input type="radio" class="${this.id}-type" name="type" value="false">站外 </div></td>
        </tr>
        <tr>
            <td class="text" style="vertical-align: baseline;padding-top: 5px;">描述</td>
            <td><textarea class="${this.id}-description" style="width: 100%;outline: none;resize: vertical;min-height: 40px;" rows="2" type="text"></textarea></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <button style="width: 100%" class="${this.id}-submit">提交</button>
            </td>
        </tr>
        </tbody>
    </table>`;
            this.title = document.getElementsByClassName(`${this.id}-title`)[0];
            this.path = document.getElementsByClassName(`${this.id}-path`)[0];
            this.image = document.getElementsByClassName(`${this.id}-image`)[0];
            this.type = document.getElementsByClassName(`${this.id}-type`);
            this.description = document.getElementsByClassName(`${this.id}-description`)[0];
            this.submit = document.getElementsByClassName(`${this.id}-submit`)[0];
            let $this = this;
            this.image.onclick = function () {
                $this.iconDialog.show();
            }
            this.submit.onclick = function () {
                $this.toSubmit();
            }
        }
        show(obj) {
            this.objId = obj.id || "";
            if (typeof obj !== 'object') {
                obj = {};
            }
            if (obj.title) {
                this.title.value = obj.title;
            } else {
                this.title.value = "";
            }
            if (obj.path) {
                this.path.value = obj.path;
            } else {
                this.path.value = "";
            }
            if (obj.description) {
                this.description.value = obj.description;
            } else {
                this.description.value = "";
            }
            let icon = 'ils';
            obj.image = obj.image || "";
            if (obj.image.startsWith('icon:')) {
                icon = obj.image.substring('icon:'.length);
                this.imageValue = obj.image;
            } else {
                this.imageValue = `icon:ils`;
            }
            this.image.innerHTML = `<div style="box-sizing: border-box; border: unset; color: rgb(0, 0, 0);"><i class="inco">
                <span class="icons-product-md ${icon}" style="line-height: 30px; height: 30px;font-size: 20px;"></span>
            </i></div>`;

            if (obj.type === 'inner') {
                this.type[0].checked = true;
                this.type[1].checked = false;
            } else if (obj.type === 'outter') {
                this.type[0].checked = false;
                this.type[1].checked = true;
            } else {
                this.type[0].checked = true;
                this.type[1].checked = false;
            }
            this.dialog.show();
        }
        updateIcon() {
            let icon = 'ils';
            this.imageValue = this.imageValue || "";
            if (this.imageValue.startsWith('icon:')) {
                icon = this.imageValue.substring('icon:'.length);
                // this.imageValue = obj.image;
            } else {
                this.imageValue = `icon:ils`;
            }
            this.image.innerHTML = `<div style="box-sizing: border-box; border: unset; color: rgb(0, 0, 0);"><i class="inco">
                <span class="icons-product-md ${icon}" style="line-height: 30px; height: 30px;font-size: 20px;"></span>
            </i></div>`;
        }
        toSubmit() {
            let obj = {
                id: this.objId,
                title: this.title.value,
                path: this.path.value,
                image: this.imageValue,
                description: this.description.value,
                type: this.type[0].checked ? 'inner' : 'outter',
            };
            let add = !obj.id;
            console.log(obj);
            Requests.getToken().then(token => {
                if (add) {
                    Requests.addPage(obj,token)
                        .then(ret => {
                            if (ret.code === 200) {
                                this.dialog.hide();
                                window.table.updateTr(ret.data,true);
                            }
                        });
                } else {
                    Requests.updatePage(obj,token)
                        .then(ret => {
                            if (ret.code === 200) {
                                this.dialog.hide();
                                window.table.updateTr(obj);
                            }
                        });
                }
            });
        }
    });

    window.beforeLoadApp = function () {
        Requests.getToken()
        .then(token => {
            if (token === '') {
                alert("请先登录");
                location.href = './../Login/index.html?editpages';
            } else {
                Requests.checkAdmin(token)
                .then(msg => {
                    if (msg === '') {
                        window.main();
                    } else {
                        alert(msg);
                        location.href = './../login/index.index';
                    }
                })
            }
        });
    }
    window.main = function () {
        window.iconDialog = new Dialog("选择图标",101);
        window.editDialog = new Dialog("提交/修改信息");
        window.editForm.init(window.editDialog,window.iconDialog);
        window.icons = new Icons(window.iconDialog.refreshDom.bind(window.iconDialog,'dialogContent'));
        window.icons.initIcon(Card.icons,function (icon) {
            window.editForm.imageValue = `icon:${icon}`;
            window.editForm.updateIcon();
            window.iconDialog.hide();
        });
        let showIcon = (ind,li) => {
            // let li = list[ind];
            li.image = li.image.toLowerCase();
            let icon = 'ils';
            if (li.image.startsWith('icon:')) {
                icon = li.image.substring('icon:'.length);
            }
            return `<div style="box-sizing: border-box; border: unset; color: rgb(0, 0, 0);"><i class="inco">
                <span class="icons-product-md ${icon}" style="line-height: 30px; height: 30px;font-size: 20px;"></span>
            </i></div>`;
        };
        let form = "";
        let editTable = (ind,list) => {
            window.editForm.show.bind(window.editForm,list[ind])();
        }
        let deleteTable = (ind,list) => {
            Requests.getToken()
            .then(token => {
                Requests.deletePage(list[ind].id,token)
                .then(() => {
                    window.table.removeTr(list[ind]);
                }).catch(e => alert(e.message));
            })
        }
        window.table = new Table(document.body,"页面管理<span id='addItem' style='float:right;cursor: pointer;'>添加</span>");
        Requests.getPages().then(req => {
            table.setData(
                [
                    {title: '#', name:"#index"},
                    {title: '标题', name: 'title'},
                    {title: '图片',fn: showIcon},
                    // {title: '标签',name:'tags'},
                    {title: '修改', fn() {return "<span class='table-edit-btn'>修改</span>"},action: editTable},
                    {title: '删除', fn() {return "<span class='table-delete-btn'>删除</span>"},action: deleteTable}],
                req.data
            );
        });
        document.getElementById('addItem').onclick = function () {
            window.editForm.show({});
        }
    };
    let sc = document.createElement('script');
    sc.src = "./../../base/utils/loadFiles.js";
    sc.onload = function () {
        let files = [
            { link: './../../base/utils/requests.js',text: '' },
            { link: './../../base/loading/loading.css',text: '' },
            { link: './../../base/loading/Loading.js',text: 'Loading JS' },
            { link: './../../base/dialog/Dialog.js',text: '' },
            { link: './../../base/icons/icon.css',text: '' },
            { link: './../../base/icons/Icons.js',text: '' },
            { link: './../../base/card/Card.js',text: '' },
            { link: './../../base/Slider/jquery.1.2.6.js',text: '' },
            { link: './../../base/Table/Table.js',text: '' },
        ];
        window.loading = null;
        if (window.parent !== window) {
            if (window.parent.loading) {
                window.loading = window.parent.loading;
                files.shift();
                files.shift();
            }
        }
        let lf = new LoadFiles();
        lf.addFile(files).load(o => {
            if (!o.start) {
                o.next();
                if (o.over) {
                    window.loading.hide();
                    window.beforeLoadApp();
                } else if (o.file.text === 'Loading JS') {
                    window.loading = new Loading();
                }
            }
        });
    }
    document.head.append(sc);
</script>
</html>
